Bortom Enums: TypeScript Const Assertions kontra Union Types

I en värld av statiskt typad JavaScript med TypeScript har enums länge varit standardlösningen för att representera en fast uppsättning namngivna konstanter. De erbjuder ett tydligt och läsbart sätt att definiera en samling relaterade värden. Men i takt med att projekt växer och utvecklas söker utvecklare ofta efter mer flexibla och ibland mer högpresterande alternativ. Två kraftfulla kandidater som ofta dyker upp är const assertions och union types. Detta inlägg utforskar nyanserna i att använda dessa alternativ till traditionella enums, ger praktiska exempel och vägleder dig i när du ska välja vilken metod.

Att förstå traditionella TypeScript Enums

Innan vi utforskar alternativen är det viktigt att ha en solid förståelse för hur vanliga TypeScript enums fungerar. Enums låter dig definiera en uppsättning namngivna numeriska eller strängkonstanter. De kan vara numeriska (standard) eller strängbaserade.

Numeriska Enums

Som standard tilldelas enum-medlemmar numeriska värden som börjar från 0.

            enum DirectionNumeric {
  Up,
  Down,
  Left,
  Right
}

let myDirection: DirectionNumeric = DirectionNumeric.Up;
console.log(myDirection); // Output: 0

            

              
                Copy
              
            
          

Du kan också explicit tilldela numeriska värden.

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  InternalError = 500
}

let responseStatus: StatusCode = StatusCode.Success;
console.log(responseStatus); // Output: 200

            

              
                Copy
              
            
          

Sträng-Enums

Sträng-enums föredras ofta för sin förbättrade felsökningsupplevelse, eftersom medlemsnamnen bevaras i den kompilerade JavaScript-koden.

            enum ColorString {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let favoriteColor: ColorString = ColorString.Blue;
console.log(favoriteColor); // Output: "BLUE"

            

              
                Copy
              
            
          

Overheaden med Enums

Även om enums är bekväma, medför de en viss overhead. När de kompileras till JavaScript omvandlas TypeScript enums till objekt som ofta har omvända mappningar (t.ex. mappning av det numeriska värdet tillbaka till enum-namnet). Detta kan vara användbart men bidrar också till paketstorleken och är inte alltid nödvändigt.

Tänk dig denna enkla sträng-enum:

            enum Status {
  Pending = "PENDING",
  Processing = "PROCESSING",
  Completed = "COMPLETED"
}

            

              
                Copy
              
            
          

I JavaScript kan detta bli något i stil med:

            var Status;
(function (Status) {
    Status["Pending"] = "PENDING";
    Status["Processing"] = "PROCESSING";
    Status["Completed"] = "COMPLETED";
})(Status || (Status = {}));

            

              
                Copy
              
            
          

För enkla, skrivskyddade uppsättningar av konstanter kan denna genererade kod kännas lite överdriven.

Alternativ 1: Const Assertions

Const assertions är en kraftfull TypeScript-funktion som låter dig instruera kompilatorn att härleda den mest specifika möjliga typen för ett värde. När de används med arrayer eller objekt som är avsedda att representera en fast uppsättning värden, kan de fungera som ett lättviktsalternativ till enums.

Const Assertions med Arrayer

Du kan skapa en array av strängliteraler och sedan använda en const-assertion för att göra dess typ oföränderlig och dess element till literaltyper.

            const statusArray = ["PENDING", "PROCESSING", "COMPLETED"] as const;

type StatusType = typeof statusArray[number];

let currentStatus: StatusType = "PROCESSING";
// currentStatus = "FAILED"; // Error: Type '"FAILED"' is not assignable to type 'StatusType'.

function processStatus(status: StatusType) {
  console.log(`Processing status: ${status}`);
}

processStatus("COMPLETED");

            

              
                Copy
              
            
          

Låt oss bryta ner vad som händer här:

• as const: Denna assertion instruerar TypeScript att behandla arrayen som skrivskyddad och att härleda de mest specifika literaltyperna för dess element. Så, istället för `string[]` blir typen `readonly ["PENDING", "PROCESSING", "COMPLETED"]`.
• typeof statusArray[number]: Detta är en mappad typ. Den itererar över alla index i statusArray och extraherar deras literaltyper. Indexsignaturen number säger i princip "ge mig typen av vilket element som helst i denna array." Resultatet är en union type: "PENDING" | "PROCESSING" | "COMPLETED".

Detta tillvägagångssätt ger typsäkerhet liknande sträng-enums men genererar minimalt med JavaScript. Själva statusArray förblir en array av strängar i JavaScript.

Const Assertions med Objekt

Const assertions är ännu kraftfullare när de appliceras på objekt. Du kan definiera ett objekt där nycklarna representerar dina namngivna konstanter och värdena är literala strängar eller nummer.

            const userRoles = {
  Admin: "ADMIN",
  Editor: "EDITOR",
  Viewer: "VIEWER"
} as const;

type UserRole = typeof userRoles[keyof typeof userRoles];

let currentUserRole: UserRole = "EDITOR";
// currentUserRole = "GUEST"; // Error: Type '"GUEST"' is not assignable to type 'UserRole'.

function displayRole(role: UserRole) {
  console.log(`User role is: ${role}`);
}

displayRole(userRoles.Admin); // Valid
displayRole("EDITOR"); // Valid

            

              
                Copy
              
            
          

I detta objektexempel:

• as const: Denna assertion gör hela objektet skrivskyddat. Ännu viktigare är att den härleder literaltyper för alla egenskapsvärden (t.ex. "ADMIN" istället för string) och gör själva egenskaperna skrivskyddade.
• keyof typeof userRoles: Detta uttryck resulterar i en union av nycklarna i userRoles-objektet, vilket är "Admin" | "Editor" | "Viewer".
• typeof userRoles[keyof typeof userRoles]: Detta är en uppslagstyp. Den tar unionen av nycklar och använder den för att slå upp de motsvarande värdena i typen för userRoles. Detta resulterar i en union av värdena: "ADMIN" | "EDITOR" | "VIEWER", vilket är vår önskade typ för roller.

JavaScript-utdatan för userRoles kommer att vara ett vanligt JavaScript-objekt:

            var userRoles = {
    Admin: "ADMIN",
    Editor: "EDITOR",
    Viewer: "VIEWER"
};

            

              
                Copy
              
            
          

Detta är betydligt lättare än en typisk enum.

När man ska använda Const Assertions

• Skrivskyddade konstanter: När du behöver en fast uppsättning sträng- eller nummerliteraler som inte ska ändras under körning.
• Minimal JavaScript-utdata: Om du är oroad över paketstorleken och vill ha den mest högpresterande körtidsrepresentationen för dina konstanter.
• Objektliknande struktur: När du föredrar läsbarheten hos nyckel-värde-par, liknande hur du skulle strukturera data eller konfiguration.
• Strängbaserade uppsättningar: Särskilt användbart för att representera tillstånd, typer eller kategorier som bäst identifieras med beskrivande strängar.

Alternativ 2: Union Types

Union types låter dig deklarera att en variabel kan innehålla ett värde av en av flera typer. När de kombineras med literaltyper (sträng-, nummer-, booleska literaler) utgör de ett kraftfullt sätt att definiera en uppsättning tillåtna värden utan att behöva en explicit konstantdeklaration för själva uppsättningen.

Union Types med strängliteraler

Du kan direkt definiera en union av strängliteraler.

            type TrafficLightColor = "RED" | "YELLOW" | "GREEN";

let currentLight: TrafficLightColor = "YELLOW";
// currentLight = "BLUE"; // Error: Type '"BLUE"' is not assignable to type 'TrafficLightColor'.

function changeLight(color: TrafficLightColor) {
  console.log(`Changing light to: ${color}`);
}

changeLight("RED");
// changeLight("REDDY"); // Error

            

              
                Copy
              
            
          

Detta är det mest direkta och ofta det mest koncisa sättet att definiera en uppsättning tillåtna strängvärden.

Union Types med numeriska literaler

På samma sätt kan du använda numeriska literaler.

            type HttpStatusCode = 200 | 400 | 404 | 500;

let responseCode: HttpStatusCode = 404;
// responseCode = 201; // Error: Type '201' is not assignable to type 'HttpStatusCode'.

function handleResponse(code: HttpStatusCode) {
  if (code === 200) {
    console.log("Success!");
  } else {
    console.log(`Error code: ${code}`);
  }
}

handleResponse(500);

            

              
                Copy
              
            
          

När man ska använda Union Types

• Enkla, direkta uppsättningar: När uppsättningen av tillåtna värden är liten, tydlig och inte kräver beskrivande nycklar utöver värdena själva.
• Implicita konstanter: När du inte behöver referera till en namngiven konstant för själva uppsättningen, utan snarare använder de literala värdena direkt.
• Maximal koncishet: För enkla scenarier där det känns överflödigt att definiera ett dedikerat objekt eller en array.
• Funktionsparametrar/returtyper: Utmärkt för att definiera den exakta uppsättningen av godkända sträng- eller nummer-in- och utdata för funktioner.

Jämförelse av Enums, Const Assertions och Union Types

Låt oss sammanfatta de viktigaste skillnaderna och användningsfallen:

Körtidsbeteende

• Enums: Genererar JavaScript-objekt, potentiellt med omvända mappningar.
• Const Assertions (Arrayer/Objekt): Genererar vanliga JavaScript-arrayer eller -objekt. Typinformationen raderas vid körning, men datastrukturen finns kvar.
• Union Types (med literaler): Ingen körtidsrepresentation för själva unionen. Värdena är bara literaler. Typkontroll sker helt och hållet vid kompilering.

Läsbarhet och uttrycksfullhet

• Enums: Hög läsbarhet, särskilt med beskrivande namn. Kan vara mer mångordiga.
• Const Assertions (Objekt): God läsbarhet genom nyckel-värde-par, vilket efterliknar konfigurationer eller inställningar.
• Const Assertions (Arrayer): Mindre läsbart för att representera namngivna konstanter, mer för enbart en ordnad lista med värden.
• Union Types: Mycket koncis. Läsbarheten beror på tydligheten i de literala värdena själva.

Typsäkerhet

• Alla tre tillvägagångssätt erbjuder stark typsäkerhet. De säkerställer att endast giltiga, fördefinierade värden kan tilldelas variabler eller skickas till funktioner.

Paketstorlek

• Enums: Generellt sett störst på grund av genererade JavaScript-objekt.
• Const Assertions: Mindre än enums, eftersom de producerar vanliga datastrukturer.
• Union Types: Minst, eftersom de inte genererar någon specifik körtidsdatastruktur för själva typen, utan förlitar sig enbart på literala värden.

Matris för användningsfall

Här är en snabbguide:

Praktiska exempel och bästa praxis

Exempel 1: Representera API-statuskoder

Enum:

            enum ApiStatus {
  Success = "SUCCESS",
  Error = "ERROR",
  Pending = "PENDING"
}

function handleApiResponse(status: ApiStatus) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Const Assertion (Objekt):

            
const apiStatusCodes = {
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
  PENDING: "PENDING"
} as const;

type ApiStatus = typeof apiStatusCodes[keyof typeof apiStatusCodes];

function handleApiResponse(status: ApiStatus) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Union Type:

            
type ApiStatus = "SUCCESS" | "ERROR" | "PENDING";

function handleApiResponse(status: ApiStatus) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Rekommendation: För detta scenario är en union type oftast den mest koncisa och effektiva lösningen. De literala värdena är tillräckligt beskrivande i sig själva. Om du behövde associera ytterligare metadata med varje status (t.ex. ett användarvänligt meddelande), skulle ett const assertion-objekt vara ett bättre val.

Exempel 2: Definiera användarroller

Enum:

            
enum UserRoleEnum {
  Admin = "ADMIN",
  Moderator = "MODERATOR",
  User = "USER"
}

function getUserPermissions(role: UserRoleEnum) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Const Assertion (Objekt):

            
const userRolesObject = {
  Admin: "ADMIN",
  Moderator: "MODERATOR",
  User: "USER"
} as const;

type UserRole = typeof userRolesObject[keyof typeof userRolesObject];

function getUserPermissions(role: UserRole) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Union Type:

            
type UserRole = "ADMIN" | "MODERATOR" | "USER";

function getUserPermissions(role: UserRole) {
  // ... logic ...
}

            

              
                Copy
              
            
          

Rekommendation: Ett const assertion-objekt utgör en bra balans här. Det ger tydliga nyckel-värde-par (t.ex. userRolesObject.Admin) som kan förbättra läsbarheten vid referens till roller, samtidigt som det är högpresterande. En union type är också en mycket stark kandidat om direkta strängliteraler är tillräckliga.

Exempel 3: Representera konfigurationsalternativ

Föreställ dig ett konfigurationsobjekt för en global applikation som kan ha olika teman.

Enum:

            
enum Theme {
  Light = "light",
  Dark = "dark",
  System = "system"
}

interface AppConfig {
  theme: Theme;
  // ... other config options ...
}

            

              
                Copy
              
            
          

Const Assertion (Objekt):

            
const themes = {
  Light: "light",
  Dark: "dark",
  System: "system"
} as const;

type Theme = typeof themes[keyof typeof themes];

interface AppConfig {
  theme: Theme;
  // ... other config options ...
}

            

              
                Copy
              
            
          

Union Type:

            
type Theme = "light" | "dark" | "system";

interface AppConfig {
  theme: Theme;
  // ... other config options ...
}

            

              
                Copy
              
            
          

Rekommendation: För konfigurationsinställningar som teman är const assertion-objektet ofta idealiskt. Det definierar tydligt de tillgängliga alternativen och deras motsvarande strängvärden. Nycklarna (Light, Dark, System) är beskrivande och mappas direkt till värdena, vilket gör konfigurationskoden mycket lättförståelig.

Att välja rätt verktyg för jobbet

Beslutet mellan TypeScript enums, const assertions och union types är inte alltid svartvitt. Det handlar ofta om en avvägning mellan körtidsprestanda, paketstorlek och kodens läsbarhet/uttrycksfullhet.

• Välj Union Types när du behöver en enkel, begränsad uppsättning av sträng- eller nummerliteraler och maximal koncishet är önskvärt. De är utmärkta för funktionssignaturer och grundläggande värdebegränsningar.
• Välj Const Assertions (med objekt) när du vill ha ett mer strukturerat, läsbart sätt att definiera namngivna konstanter, liknande en enum, men med betydligt mindre körtidsoverhead. Detta är utmärkt för konfiguration, roller eller andra uppsättningar där nycklarna tillför betydande mening.
• Välj Const Assertions (med arrayer) när du helt enkelt behöver en oföränderlig, ordnad lista med värden, och direktåtkomst via index är viktigare än namngivna nycklar.
• Överväg TypeScript Enums när du behöver deras specifika funktioner, såsom omvänd mappning (även om detta är mindre vanligt i modern utveckling) eller om ditt team har en stark preferens och prestandapåverkan är försumbar för ditt projekt.

I många moderna TypeScript-projekt ser man en tendens att föredra const assertions och union types framför traditionella enums, särskilt för strängbaserade konstanter, på grund av deras bättre prestandaegenskaper och ofta enklare JavaScript-utdata.

Globala överväganden

När man utvecklar applikationer för en global publik är konsekventa och förutsägbara konstantdefinitioner avgörande. De val vi har diskuterat (enums, const assertions, union types) bidrar alla till denna konsekvens genom att upprätthålla typsäkerhet över olika miljöer och utvecklarregioner.

• Konsekvens: Oavsett vald metod är nyckeln konsekvens inom ditt projekt. Om du bestämmer dig för att använda const assertion-objekt för roller, håll dig till det mönstret i hela kodbasen.
• Internationalisering (i18n): När du definierar etiketter eller meddelanden som ska internationaliseras, använd dessa typsäkra strukturer för att säkerställa att endast giltiga nycklar eller identifierare används. De faktiska översatta strängarna hanteras separat via i18n-bibliotek. Till exempel, om du har ett `status`-fält som kan vara "PENDING", "PROCESSING", "COMPLETED", skulle ditt i18n-bibliotek mappa dessa interna identifierare till lokaliserad visningstext.
• Tidszoner & Valutor: Även om det inte är direkt relaterat till enums, kom ihåg att när du hanterar värden som datum, tider eller valutor kan TypeScripts typsystem hjälpa till att upprätthålla korrekt användning, men externa bibliotek är vanligtvis nödvändiga för korrekt global hantering. Till exempel kan en `Currency` union type definieras som `"USD" | "EUR" | "GBP"`, men den faktiska konverteringslogiken kräver specialiserade verktyg.

Slutsats

TypeScript erbjuder en rik uppsättning verktyg för att hantera konstanter. Även om enums har tjänat oss väl, erbjuder const assertions och union types övertygande, ofta mer högpresterande, alternativ. Genom att förstå deras skillnader och välja rätt tillvägagångssätt baserat på dina specifika behov – oavsett om det är prestanda, läsbarhet eller koncishet – kan du skriva mer robust, underhållbar och effektiv TypeScript-kod som skalar globalt.

Att anamma dessa alternativ kan leda till mindre paketstorlekar, snabbare applikationer och en mer förutsägbar utvecklarupplevelse för ditt internationella team.